import { useState, useEffect } from 'react';

// Effect清理函数的执行
export const App3 = () => {
  // 控制子组件消失和显示
  const [visible, setVisible] = useState(true);
  return (
    <div>
      <h2>父组件</h2>
      <button onClick={() => setVisible(!visible)}>消失/回来</button>
      <hr />
      {visible ? <Counter /> : null}
    </div>
  );
};

const Counter = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 组件加载完毕，effect 执行
    console.log('组件加载完毕，effect 执行');
    // const timerId = setInterval(() => {
    //   console.log('计时器');
    // }, 1000);
    return () => {
      // 组件卸载时，执行清理函数
      // clearInterval(timerId);
      console.log('组件卸载时，执行清理函数');
    };
  });

  return (
    <div>
      <h3>我是一会儿出现一会儿消失的子组件</h3>
      <h3>{count}</h3>
      <button onClick={() => setCount(count + 1)}>count+</button>
    </div>
  );
};

// 依赖项空数组
// 只在组件第一次渲染完毕后执行，之后的数据变化不再执行
export const App2 = () => {
  // 状态变量count
  const [count, setCount] = useState(0);

  // 组件渲染完毕后，执行一个操作（副作用）
  useEffect(() => {
    console.log('副作用里开启了计时器');
    return () => console.log('这个函数会在组件卸载时执行');
  }, []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>点击{count}次</button>
    </div>
  );
};

// 依赖项指定
export const App = () => {
  // 状态变量count
  const [count, setCount] = useState(0);

  // 组件渲染完毕后，执行一个操作（副作用）
  useEffect(() => {
    console.log('副作用');
    document.title = count;
  }, [count]);

  // 状态变量 number
  const [number, setNumber] = useState(10);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>点击{count}次</button>
      <h2>{number}</h2>
      <button onClick={() => setNumber(number + 1)}>setNumber</button>
    </div>
  );
};
